


A Complete Guide to 'Limited HTML' on AO3

by CodenameCarrot



Category: No Fandom
Genre: Fanwork Research & Reference Guides, Gen, Guide, HTML, How-to, cheat sheet, no story here, reference
Language: English
Status: In-Progress
Published: 2015-11-11
Updated: 2015-11-23
Packaged: 2018-05-01 03:53:30
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 3
Words: 2,642
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/5191202
Author URL: https://archiveofourown.org/users/CodenameCarrot/pseuds/CodenameCarrot
Summary: <blockquote class="userstuff">
              <p>There are some great quick guides to HTML on A03. This is not one of them - it is a <b><em>comprehensive</em></b> guide, dividing all of the available tags into the following categories:</p><p>1. Text Formatting (in-line HTML)<br/>2. Page Formatting (block HTML)<br/>3. Tables and Lists<br/>4. Links and Images</p><p>Each tag will have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. </p><p>It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.</p>
            </blockquote>





	1. Text Formatting

**_Note: No CSS skin has been added to this work. What you see below is the default A03 formatting for each of these HTML tags._ **

The text formatting tags **_supported by A03_** are listed below, with examples of how to code them and what they look like. If you want to learn more, these are generally referred to as "HTML in-line formatting." In general, they are very simple with an opening tag  <tag> and a closing tag </tag> \- all text between these tags will be formatted. That's it. If you want to apply more than one formatting (for example, bold AND italic) you can nest the tags: <tag1> <tag2> like this </tag1> </tag2>

The table below divides the text formatting tags into three groups: 

**General Formatting**
     what we usually think of a as formatted text - bold, italic, etc.
**Special Types of Text**
     usually used when writing or formatting computer code in HTML
**Identify Information**
     text showing paticular types of information you'd like text-to-voice page readers or web-spiders/search engines to identify correctly.  
For example, if you have a tumblr, live journal, or twitter, you might want to include that within an address tag (author info/author contact info).

The second table shows how to use tags that add information to text, occassionally formatting the text. One use of this in fiction could be for foreign words - rather than having to insert the translation, or include it in a note at the end, using one of these tags would allow the user to see the translation by hovering the cursor over the foreign words. This is a stretching of the tags - they're intended for defining things like abbreviations - but will work fine.

In general, the best practice in HTML is to use a tag that describes what your doing: 'em' for emphasis is preferred over 'i' for italic. That said, I first learned HTML in the 90's, and I'll stop using 'b' 'i' and 'u' for bold, italic, and underline when they ~~pry them from my cold dead hands~~ switch the entire internet to HTML 5. _(If you got the joke in the previous sentence, you don't need this guide. Just go to[w3schools.com](http://www.w3schools.com) and look up what tag is giving you trouble.)_

Format | 

Tag

|      Sample Code | Result  
---|---|---|---  
  
### General Formatting [(Tutorial Link)](http://www.w3schools.com/html/html_formatting.asp)  
  
bold | [b](http://www.w3schools.com/html/html_formatting.asp) | `    <b>Text Inside 'b' Tag</b>` | **Text Inside 'b' Tag**  
strong | [strong](http://www.w3schools.com/html/html_formatting.asp) | `    <strong>Text Inside 'strong' Tag</strong>` | **Text Inside 'strong' Tag**  
italic | [i](http://www.w3schools.com/html/html_formatting.asp) | `    <i>Text Inside 'i' Tag</i>` | _Text Inside 'i' Tag_  
emphasis | [em](http://www.w3schools.com/html/html_formatting.asp) | `    <em>Text Inside 'em' Tag</em>` | _Text Inside 'em' Tag_  
strikethrough | [strike](http://www.w3schools.com/tags/tag_strike.asp) | `    <strike>Text Inside 'strike' Tag</strike>` | ~~Text Inside 'strike' Tag~~  
no longer accurate | [s](http://www.w3schools.com/tags/tag_s.asp) | `    <s>Text Inside 's' Tag</s>` | ~~Text Inside 's' Tag~~  
deleted | [del](http://www.w3schools.com/html/html_formatting.asp) | `    <del>Text Inside 'del' Tag</del>` | ~~Text Inside 'del' Tag~~  
stylistically different | [u](http://www.w3schools.com/tags/tag_u.asp) | `    <u>Text Inside 'u' Tag</u>` | Text Inside 'u' Tag  
inserted | [ins](http://www.w3schools.com/html/html_formatting.asp) | `    <ins>Text Inside 'ins' Tag</ins>` | Text Inside 'ins' Tag  
subscript | [sub](http://www.w3schools.com/html/html_formatting.asp) | `    Text Inside<sub> 'sub'</sub> Tag` | Text Inside 'sub' Tag  
superscript | [sup](http://www.w3schools.com/html/html_formatting.asp) | `    Text Inside<sup> 'sup'</sup> Tag` | Text Inside 'sup' Tag  
make text bigger | [big](http://www.w3schools.com/tags/tag_big.asp) | `    Text Inside<big> 'big'</big> Tag` | Text Inside 'big' Tag  
make text smaller | [small](http://www.w3schools.com/html/html_formatting.asp) | `    Text Inside<small> 'small'</small> Tag` | Text Inside 'small' Tag  
  
### Special Types of Text  
  
teletype | [tt](http://www.w3schools.com/tags/tag_tt.asp) | `    <tt>Text Inside 'tt' Tag</tt>` | `Text Inside 'tt' Tag`  
preformatted text | [pre](http://www.w3schools.com/tags/tag_pre.asp) | `    <pre>Text Inside 'pre' Tag</pre>` | 
    
    
    Text Inside 'pre' Tag  
  
computer code | [code](http://www.w3schools.com/tags/tag_code.asp) | `    <code>Text Inside 'code' Tag</code>` | `Text Inside 'code' Tag`  
keyboard input | [kbd](http://www.w3schools.com/tags/tag_kbd.asp) | `    <kbd>Text Inside 'kbd' Tag</kbd>` | `Text Inside 'kbd' Tag`  
sample output | [samp](http://www.w3schools.com/tags/tag_samp.asp) | `    <samp>Text Inside 'samp' Tag</samp>` | Text Inside 'samp' Tag  
variable(s) | [var](http://www.w3schools.com/tags/tag_var.asp) | `    <var>Text Inside 'var' Tag</var>` | Text Inside 'var' Tag  
  
### Identify Information  
  
Owner/Author Info | [address](http://www.w3schools.com/tags/tag_address.asp) | `    <address>Text Inside 'address' Tag</address>` | Text Inside 'address' Tag  
citation/title | [cite](http://www.w3schools.com/tags/tag_cite.asp) | `    <cite>Text Inside 'cite' Tag</cite>` | Text Inside 'cite' Tag  
inline quotation | [q](http://www.w3schools.com/tags/tag_q.asp) | `    <q>Text Inside 'q' Tag</q>` | "Text Inside 'q' Tag"  
  
  
  
  
  
These tags add information to the text. They do this by using an attribute - a modifier to the tag - containing the text to be displayed. These tags all take the same one 'title' - and make the title value appear when the cursor hovers over the tagged text. To set an attribute, instead of just opening with <tag> we add in the attribute like this: <tag attribute="`attribute value`">. The tag will close as normal.

 ** _Note: these tags DO NOT WORK with mobile or touchscreen devices. Please see the notes for more information_**

Format | 

Tag

| Attribute | Value | Sample Code | Result  
---|---|---|---|---|---  
  
### Tags to Add Information  
  
abbreviation | [abbr](http://www.w3schools.com/tags/tag_abbr.asp) | title | December | `We will be having our annual meeting in <abbr title="December.">Dec</abbr>` | We will be having our annual meeting in Dec  
acronym | [acronym](http://www.w3schools.com/tags/tag_acronym.asp) | title | I Don't Even Know | `I tend to avoid fics where the tagging is sloppy and ends in <acronym title="I Don't Even Know">IDEK.</acronym>` | I tend to avoid fics where the tagging is sloppy and ends in IDEK.  
definition | [dfn](http://www.w3schools.com/tags/tag_dfn.asp) | title | Badassium | `<dfn title="Badassium">Bd</dfn> (Badassium), is the 69th element in the periodic table. It was first syntesized by Anthony E. Stark in 2012.` |  Bd is the 69th element in the periodic table. It was first synthesized by Anthony E. Stark in 2012.  
  
The most versatile, and most powerful, of the text formatting tags is the span tag. Because using it requires being comfortable with both HTML attributes and the specialized values for them, the span tag will be addressed in-depth in chapter 4. 

**Notes for the Chapter:**

> Informative tags they have a default behaviour for the :hover (when the mouse pointer is over them) but not the :focus (tap-and-hold on a touchscreen - like when you select an input field). Moreover, because of the type of HTML they are, **_cannot_** take the :focus property. 
> 
> Please see the comments for discussion and possible work-arounds.


	2. Page Formatting

**Summary for the Chapter:**

> formatting pages/blocks of text

**_Note: No CSS skin has been added to this work. What you see below is the default A03 formatting for each of these HTML tags._ **

The page formatting tags ** _supported by A03_** are listed below, with examples of how to code them and what they look like. If you want to learn more about them, they are usually referred to as "HTML Block Formatting." Like text formatting, most act on the enclosed text between the opening tag  <tag> and a closing tag </tag>. However, there are two _unclosed_ tags introduced at the end of the page. Unlike with text formatting, a block of text can only be in one tag at a time (e.g. Header 1 or Header 3, never both)

, **with the exception of the 'div' tag** , which is used to group and format multiple blocks (headings, paragraphs, etc.) of text.

The most common way of structuring an HTML document - for A03 - is by using paragraphs ([the 'p' tag](http://www.w3schools.com/tags/tag_p.asp)) or paragraphs within divisions ([the 'div' tag](http://www.w3schools.com/tags/tag_div.asp)). The code for this is shown below:

Sample Code | Results  
---|---  
  
`` <div>  
   <p>  
      All of the text for Paragraph 1  
   </p>  
   <p>  
      All of the text for Paragraph 2. This is a much longer Paragraph.  
   </p>  
</div>

| 

All of the text for Paragraph 1 

All of the text for Paragraph 2. This is a much longer Paragraph.   
  
Like the 'span' tag introduced in _Chapter 1, Text Formatting_ the 'div' tag is primarily used to apply formatting to it's child elements - paragraphs and text by setting it's attributes. (It can use align and all of the [HTML global attributes](http://www.w3schools.com/tags/ref_standardattributes.asp).) Sample code for this is shown below:

_Note: Remeber that A03 members can select their own site skins - if you force a color, it may look great compared to the default black-text on a white background, but could be very hard to read in other cases._

Sample Code | Results  
---|---  
  
`` <div align="right" style="color:blue">  
   <p>  
      All of the text for Paragraph 1  
   </p>  
   <p>  
      All of the text for Paragraph 2. This is a much longer Paragraph.  
   </p>  
</div>

| 

All of the text for Paragraph 1 

All of the text for Paragraph 2. This is a much longer paragraph.   
  
In addition to applying formatting directly to an attribute of the 'div' or 'p' tags, we can think of the following as special, 'pre-formatted' paragraphs. Text within the following tags will make a new line/section and apply the tag format. As with most HTML, the tag adds meaning to the text that can be picked up by readers and web-spiders.

Tag

| Sample Code | Result  
---|---|---  
  
### [Headings (w3schools tutorial link)](http://www.w3schools.com/tags/tag_hn.asp)  
  
heading 1 | 

h1

| `<h1>Text Inside 'h1' Tag</h1>` | 

# Text Inside 'h1' Tag  
  
heading 2 | 

h2

| `<h2>Text Inside 'h2' Tag</h2>` | 

## Text Inside 'h2' Tag  
  
heading 3 | 

h3

| `<h3>Text Inside 'h3' Tag</h3>` | 

### Text Inside 'h3' Tag  
  
heading 4 | 

h4

| `<h4>Text Inside 'h4' Tag</h4>` | 

#### Text Inside 'h4' Tag  
  
heading 5 | 

h5

| `<h5>Text Inside 'h5' Tag</h5>` | 

##### Text Inside 'h5' Tag  
  
heading 6 | 

h6

| `<h6>Text Inside 'h6' Tag</h6>` | 

###### Text Inside 'h6' Tag  
  
### Alternate Formats  
  
see below | [blockquote](http://www.w3schools.com/tags/tag_blockquote.asp) | `<blockquote>Text Inside 'blockquote' Tag</blockquote>` | 

> Text Inside 'blockquote' Tag  
  
see below | [center](http://www.w3schools.com/tags/tag_center.asp) | `<center>Text Inside 'center' Tag</center>` | 

Text Inside 'center' Tag  
  
**Blockquote:**  
_section quoted from another source (L & R indented)_

> The key thing to remember about blockquote is that while it doesn't apply any traditional formatting - this isn't larger or smaller; bold, itallic, or underlined, it is (usually) inset on both the left and right margins by about a tab-stop (roughly 5 characters). Of course, this can change, depending on the CSS applied to the page.

**Center:**  
_a center-aligned "paragraph"_

The center tag simply centers the text.  
If there are multiple lines of text, all will be centered.  
While useful for centering titles and prophecies;  
the 'center' tag has been retired in HTML 5  
`<div align="center"> ... </div>`  
is the future  


### Unclosed Tags....

Almost all HTML tags, as introduced in Chapter 1, need to be closed. These tags modify the enclosed text content. On A03, there are two 'unclosed' tags that you can use to format your works: 'hr' and 'br'. 

* * *

Look up! Is it a bird? A plane? No, it's [the 'hr' tag](http://www.w3schools.com/tags/tag_hr.asp). 'HR' originally stood for "hard-rule" and that's what it does: puts a rule (line) between paragraphs or divisions. The 'hr' tag does have a width atribute, however, it does not work with the default A03 formattings. To use the 'hr' tag simply add` <hr> `to your html formatted story - no need to close it or enclose text. There's another two below:

* * *

* * *

The other (unclosed) tag to make a new line is [the br tag.](http://www.w3schools.com/tags/tag_br.asp) 'BR' stands for break and it adds a break (new line) within a paragraph. This is is especially useful when writing poetry or addresses.To use the 'br' tag simply add` <br> `to your html formatted story. Note that the 'br' tag is a simple break, space is not added between lines until the paragraph is closed

Sample Code | Results  
---|---  
`` <p>  
   shall I oft compare thee <br>  
   to truly awful poetry? <br>  
   'tis true, thou art as fair <br>  
   as a sleek and fecund mare  
</p>  
<p>  
   on now for the second stanza! <br>  
   to serenade from your credanza <br>  
   this should've ended with just one <br>  
   but the 'br' tag is just too fun!  
</p> | 

shall I oft compare thee  
to truly awful poetry?  
this true, thou art as fair  
as a sleek and fecund mare

on now for the second stanza!  
to serenade from your credanza  
this should've ended with just one  
but the 'br' tag is just too fun!  
  
Because of the way A03 formats imported text or rich text, the spacing shown between paragraphs or sections may not be what you want. In this case, it is usually worth reviewing the HTML. One common thing is for there to be an empty paragraph (`<p></p>`) which will cause the visual spacing to include the bottom padding for the prior text, the top padding for the next text, and a row PLUS top and bottom padding for the blank paragraph. I highly recommend re-reading your after it's posted to ensure that the text is formatted the way you want.


	3. Tables and Lists

**Summary for the Chapter:**

> Tables and Lists

**_Note: No CSS skin has been added to this work. What you see below is the default A03 formatting for each of these HTML tags._ **

The tags supported by A03 are for tables and lists are shown below, with examples of how to code them and what they look like. These build on the concept of nested tags introduced in chapters one and two; instead of having bold inside of itallic, we begin to nest rows inside of tables and data inside of rows. Similarly, we open a list, and nest individual list elements inside of it.

* * *

Tables start by opening a table using the 'table' tag. Once open, rows can be added using the 'tr' tag; and then data added to the rows as either a header (using the 'th' tag) or a plain data cell (the 'td' tag). If special css formatting is being used for the table header, body, or footer, those OPTIONAL tags may be used to group rows. The first table shows te tags and links to the w3school page ( _they have a great table tutorial that I relied heavily upon when creating the Marvel Periodic Table of the Elements_ ) and the lower table is to show the default formatting A03 provides for each table element

As with all default formatting, it will appear differently when different site skins are engaged. If you want to force a view for your work, you will need to rely on CSS, not HTML.

| Parent Tag | Child Tag 1 | Child Tag 2 | Child Tag 3 | Definition  
---|---|---|---|---|---  
| [table](http://www.w3schools.com/tags/tag_table.asp) | - | - | - |   html table  
| (table) | [caption](http://www.w3schools.com/tags/tag_caption.asp) | - | - |   table caption  
COLS | (table) | [colgroup](http://www.w3schools.com/tags/tag_colgroup.asp) | - | - |   tags columns for formatting  
| (colgroup) | [col](http://www.w3schools.com/tags/tag_col.asp) | - |   column formatting  
SECTIONS | (table) | [thead](http://www.w3schools.com/tags/tag_thead.asp) | (tr) | - |   table header content  
(table) | [tbody](http://www.w3schools.com/tags/tag_tbody.asp) | (tr) | - |   table body content  
(table) | [tfoot](http://www.w3schools.com/tags/tag_tfoot.asp) | (tr) | - |   table footer content  
ROWS | (table) |  | [tr](http://www.w3schools.com/tags/tag_tr.asp) | - |   table row  
CELLS |  |  | (tr) | [th](http://www.w3schools.com/tags/tag_th.asp) |   header cell  
|  | (tr) | [td](http://www.w3schools.com/tags/tag_td.asp) |   table cell  
  
* * *

<caption> … The Caption <thead> … The table header section (2 rows) |  |  |  | <td> … Table Cell  
(in Header)   
---|---|---|---|---  
<th> … Header Cell  |  First |  Last  |  Age | Theme Color  
<tbody> … The table body section (6 rows) | Tony | Stark | 45 | Red & Gold  
<td> … Table Cell (in Body)  | Harry | Potter | 11 | Red & Gold  
| Rainbow | Brite | 12 | All  
| Jason  | Bourne | 38 | n/a  
|  | Elvira | 50 | Black  
| Buffy | Summers | 18 | n/a  
<tfoot> … The table footer section (1 rows) |  | Avg. Age | 29 | <td> … Table Cell  
(in Footer)   
  
* * *

Moving on from tables, There are three types of lists supported by A03 = ordered, unordered, and descriptive. All of these are shown in the examples below and are created using the following six tags:

Tag |           Meaning  
---|---  
[ol](http://www.w3schools.com/tags/tag_ol.asp) |           ordered list  
[ul](http://www.w3schools.com/tags/tag_ul.asp) |           unordered list  
[li](http://www.w3schools.com/tags/tag_li.asp) |           list item (within an ordered or unordred list)  
[dl](http://www.w3schools.com/tags/tag_dl.asp) |           description list  
[dt](http://www.w3schools.com/tags/tag_dt.asp) |           term definition in a description list  
[dd](http://www.w3schools.com/tags/tag_dd.asp) |           term in a description list  
  
### Example 1: Steven Rogers' best spit takes in the 21st century (an ordered list)

`` <ol>  
<li>Bananas </li>  
<li> Toothpaste <br>  
<i>See also:</i> Cinnamon Toothpaste</li>  
<li> Sashimi </li>  
</ol>  
| 

  1. Bananas 
  2. Toothpaste  
_See also:_ Cinnamon Toothpaste
  3. Sashimi 

  
---|---  
  
###  Example 2: Some Places of Interest (an unordered list)

_Why these cities are places of interest is left as an exercise for the reader_

`` <ul>  
<li> Istanbul </li>  
<li> Vancouver </li>  
<li> Yokohama </li>  
<li> Stuggart </li>  
</ul>  
| 

  * Istanbul 
  * Vancouver 
  * Yokohama 
  * Stuggart 

  
---|---  
  
### Example 3: Two Almost-Random Things (a descriptive list)

`` <dl>  
<dt> DD Tag </dt>  
<dd> <p> Inside a 'dd' tag you can put paragraphs, line breaks, images, links, lists, etc.</p>  
<p>And, when one is being crass, the DD tag is what you wake up to after the lactation fairy visits.</p>  
</dd>  
  
<dt> Babies </dt>  
<dd> Babies are technically just the juvenile members of the species. Unfortunately 'technically' covers a lot of ground, and diapers don't quite cover the rest. </dd>  
| 

DD Tag 
    

Inside a 'dd' tag you can put paragraphs, line breaks, images, links, lists, etc.

And, when one is being crass, the DD tag is what you wake up to after the lactation fairy visits.

Babies 
     Babies are technically just the juvenile members of the species. Unfortunately 'technically' covers a lot of ground, and diapers don't quite cover the rest.   
---|---


End file.
